<template>
  <div class="q-pa-md">
    <t-btn label="Dialog" color="primary" @click="dialog = true" />

    <t-dialog v-model="dialog">
      <t-card>
        <t-card-section class="row items-center q-gutter-sm">
          <t-btn no-caps label="Open menu" color="primary">
            <t-menu>
              <t-list dense style="min-width: 100px">
                <t-item clickable v-close-popup="2">
                  <t-item-section>Open...</t-item-section>
                </t-item>
                <t-item clickable v-close-popup="2">
                  <t-item-section>New</t-item-section>
                </t-item>
                <t-separator />
                <t-item clickable>
                  <t-item-section>Preferences</t-item-section>
                  <t-item-section side>
                    <t-icon name="keyboard_arrow_right" />
                  </t-item-section>

                  <t-menu anchor="top end" self="top start">
                    <t-list>
                      <t-item v-for="n in 3" :key="n" dense clickable>
                        <t-item-section>Submenu Label</t-item-section>
                        <t-item-section side>
                          <t-icon name="keyboard_arrow_right" />
                        </t-item-section>
                        <t-menu anchor="top end" self="top start">
                          <t-list>
                            <t-item
                              v-for="n in 3"
                              :key="n"
                              dense
                              clickable
                              v-close-popup="2"
                            >
                              <t-item-section>3rd level Label</t-item-section>
                            </t-item>
                          </t-list>
                        </t-menu>
                      </t-item>
                    </t-list>
                  </t-menu>
                </t-item>
                <t-separator />
                <t-item clickable v-close-popup="2">
                  <t-item-section>Quit</t-item-section>
                </t-item>
              </t-list>
            </t-menu>
          </t-btn>

          <t-btn no-caps label="Close dialog" color="primary" v-close-popup />
        </t-card-section>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        dialog: ref(false),
      };
    },
  };
</script>
